<template>
  <div class="params">
    <div class="params_header">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>参数列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="params_list_box">
      <div class="params_list_box_box">
        <div class="params_list_box_box_tips">
          <el-alert
            title="注意：只允许为第三级分类设置相关参数！"
            type="error"
            :closable="false"
            show-icon
          ></el-alert>
        </div>

        <div class="params_list_box_box_input">
          <el-form label-width="80px">
            <el-form-item label="活动名称">
              <el-cascader
                :options="options"
                :props="{
                  label: 'cat_name',
                  value: 'cat_id',
                  children: 'children',
                  expandTrigger: 'hover',
                }"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
          </el-form>
        </div>
        <div class="params_list_box_box_border">
          <el-tabs type="border-card">
            <el-button type="primary" v-if="status" @click="dialog = true"
              >添加参数</el-button
            >
            <el-button type="primary" disabled v-else>添加参数</el-button>
            <el-tab-pane label="动态参数">
              <el-table :data="datalist" border style="width: 100%">
                <el-table-column type="expand">
                  <template slot-scope="scope">
                    <el-tag
                      :key="index"
                      v-for="(tag, index) in scope.row.attr_vals.split(' ')"
                      closable
                      @close="handleClose(tag, index, scope.row)"
                      :disable-transitions="false"
                    >
                      {{ tag }}
                    </el-tag>
                    <el-input
                      class="input-new-tag"
                      v-if="scope.row.inputVisible"
                      v-model="scope.row.inputValue"
                      ref="saveTagInput"
                      size="small"
                      @keyup.enter.native="handleInputConfirm(scope.row)"
                      @blur="handleInputConfirm(scope.row)"
                    >
                    </el-input>
                    <el-button
                      v-else
                      class="button-new-tag"
                      size="small"
                      @click="showInput(scope.row)"
                      >+ New Tag</el-button
                    >
                  </template>
                </el-table-column>

                <el-table-column label="#" prop="index" width="48">
                  <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column>

                <el-table-column label="参数名称" prop="attr_name" width="500">
                </el-table-column>

                <el-table-column label="操作" prop="index">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      icon="el-icon-edit"
                      @click="openmodify(scope.row)"
                      >修改</el-button
                    >
                    <el-button
                      type="danger"
                      icon="el-icon-delete"
                      @click="opendel(scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <!-- 添加动态参数 -->
            <el-dialog title="添加动态参数" :visible.sync="dialog" width="30%">
              <div>
                <el-form
                  label-position="left"
                  status-icon
                  label-width="80px"
                  :model="formroles"
                  class="demo-ruleForm"
                >
                  <el-form-item label="动态参数" prop="attr_name">
                    <el-input v-model="formroles.attr_name"></el-input>
                  </el-form-item>
                </el-form>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialog = false">取 消</el-button>
                <el-button type="primary" @click="sureone">确 定</el-button>
              </span>
            </el-dialog>
            <!-- 修改动态参数 -->
            <el-dialog
              title="修改动态参数"
              :visible.sync="modifydialog"
              width="30%"
            >
              <div>
                <el-form
                  label-position="left"
                  status-icon
                  label-width="80px"
                  :model="modifyformroles"
                  class="demo-ruleForm"
                >
                  <el-form-item label="动态参数" prop="attr_name">
                    <el-input v-model="modifyformroles.attr_name"></el-input>
                  </el-form-item>
                </el-form>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="modifydialog = false">取 消</el-button>
                <el-button type="primary" @click="sureSubmit">确 定</el-button>
              </span>
            </el-dialog>
            <el-tab-pane label="静态属性">配置管理</el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getcategories,
  getdatalist,
  adddatalist,
  Submitparameter,
  deleteparameter,
  puttag,
} from "@/api/wares.js";
export default {
  data() {
    return {
      modifydialog: false,
      status: false,
      dialog: false,
      id: "",
      options: [], // 联动渲染 的 数据
      datalist: [], // 动态参数
      // 动态 参数 的 表单
      formroles: {
        attr_name: "",
        attr_sel: "many",
      },
      // 修改 动态 参数
      modifyformroles: {
        attr_name: "",
        attr_sel: "many",
        id: "",
        attrId: "",
        attr_vals: "",
      },
    };
  },
  mounted() {
    this.getcategoriesdata(); //  联动渲染 的 数据
  },
  methods: {
    getcategoriesdata() {
      // 活动名称 数据
      getcategories({}).then((res) => {
        this.options = res.data;
        console.log(res.data);
      });
    },
    // 获取 动态 参数
    async handleChange(value) {
      console.log(value);
      this.id = value[value.length - 1];
      // 获取 参数 接口

      let res = await getdatalist(this.id);
      res.data.forEach((item) => {
        return (item.inputVisible = false);
      });
      this.status = true;
      this.datalist = res.data;
    },
    // 确定 添加 动态 参数
    sureone() {
      this.dialog = false;
      let parems = {
        id: this.id,
        attr_name: this.formroles.attr_name,
        attr_sel: this.formroles.attr_sel,
      };
      console.log(parems);
      //  添加 动态 参数 的 接口
      adddatalist(parems).then((res) => {
        // 获取 参数 接口
        getdatalist(this.id).then((res) => {
          this.datalist = res.data;
        });
        // location.reload();
      });
    },
    // 修改 参数
    openmodify(scope) {
      console.log(scope);
      this.modifyformroles.attr_name = scope.attr_name;
      this.modifyformroles.id = scope.cat_id;
      this.modifyformroles.attrId = scope.attr_id;
      this.modifydialog = true;
    },
    //确定提交
    sureSubmit() {
      Submitparameter(this.modifyformroles).then((res) => {
        this.modifydialog = false;
        // 获取 参数 接口
        getdatalist(this.id).then((res) => {
          this.datalist = res.data;
        });
        console.log(res);
        this.$message({
          message: res.meta.msg,
          type: "success",
        });
      });
    },
    //删除
    opendel(scope) {
      this.modifyformroles.id = scope.cat_id;
      this.modifyformroles.attrId = scope.attr_id;

      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 删除接口
          deleteparameter(this.modifyformroles).then((res) => {
            console.log(res);
            this.$message({
              type: "success",
              message: res.meta.msg,
            });

            // 获取 参数 接口
            getdatalist(this.id).then((res) => {
              this.datalist = res.data;
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    showInput(scope) {
      scope.inputVisible = true;
      console.log(scope);

      this.$nextTick((_) => {
        this.$refs.saveTagInput.focus();
      });
    },
    async handleInputConfirm(scope) {
      let inputValue = scope.inputValue;
      if (inputValue) {
        let arr = scope.attr_vals.split(" ");
        arr.push(inputValue);
        scope.attr_vals = arr.join(" ");
      }
      scope.inputVisible = false;
      scope.inputValue = "";
    },
    async saveAttrVals(scope) {
      const res = await puttag({
        id: scope.cat_id,
        attrId: scope.attr_id,
        attr_name: scope.attr_name,
        attr_sel: scope.attr_sel,
        attr_vals: scope.attr_vals,
      });

      console.log(res);
    },
    async handleClose(tag, index, scope) {
      console.log(index);
      console.log(scope.attr_vals.split(" "));
      let arr = scope.attr_vals.split(" ");
      arr.splice(index, 1);
      scope.attr_vals = arr.join(" ");
      const res = await puttag({
        id: scope.cat_id,
        attrId: scope.attr_id,
        attr_name: scope.attr_name,
        attr_sel: scope.attr_sel,
        attr_vals: scope.attr_vals,
      });
    },
  },
  components: {},
};
</script>

<style lang='scss' scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px !important;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.el-button {
  margin: 20px 0;
}
.params {
  width: 100%;
  height: 100%;
  background: #eee;
  .params_header {
    width: 100%;
    height: 80px;
    padding-top: 30px;
    padding-left: 30px;
  }
  .params_list_box {
    width: 100%;
    height: calc(100% - 80px);
    .params_list_box_box {
      width: 95%;
      height: 100%;
      background: #fff;
      margin: 0 auto;
      .params_list_box_box_tips {
        width: 90%;
        height: 80px;
        margin: 0 auto;
        padding-top: 30px;
        .is-light {
          width: 100%;
          height: 100%;
        }
      }
      .params_list_box_box_input {
        width: 90%;
        height: 80px;
        margin: 0 auto;
        margin-top: 40px;
      }
      .params_list_box_box_border {
        width: 90%;
        margin: 0 auto;
        margin-top: 20px;
      }
    }
  }
}
</style>
